<template>
    <div class="singer">
        <div class="top-tags">
            <TagsBar :taglist="areaTags" @tagBarClick="areaClick"/>
            <TagsBar :taglist="typeTags" @tagBarClick="typeClick"/>
            <TagsBar :taglist="initialTags" @tagBarClick="initialClick"/>
        </div>
        <!-- 歌手列表 -->
        <div class="singerlist">
            <Songerlist :singers="singerlist"/>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
                background
                :current-page="currentPage"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="singerCount">
                </el-pagination>
        </div>
    </div>
</template>
<script>
import TagsBar from '@/components/content/TagsBar.vue'
import Songerlist from '@/components/content/singerlist/Songerlist.vue';
export default {
    name: "",
    data() {
        return {
            /* 分类标签 */
            areaTags: {
                category: "语种",
                list: [
                    { area: -1, name: "全部" },
                    { area: 7, name: "华语" },
                    { area: 96, name: "欧美" },
                    { area: 8, name: "日本" },
                    { area: 16, name: "韩国" },
                    { area: 0, name: "其它" },
                ],
            },
            typeTags: {
                category: "分类",
                list: [
                    { type: -1, name: "全部" },
                    { type: 1, name: "男歌手" },
                    { type: 2, name: "女歌手" },
                    { type: 3, name: "乐队" },
                ],
            },
            initialTags: {
                category: "筛选",
                list: [
                    { initial: -1, name: "热门" },
                    { initial: "a", name: "A" },
                    { initial: "b", name: "B" },
                    { initial: "c", name: "C" },
                    { initial: "d", name: "D" },
                    { initial: "e", name: "E" },
                    { initial: "f", name: "F" },
                    { initial: "g", name: "G" },
                    { initial: "h", name: "H" },
                    { initial: "i", name: "I" },
                    { initial: "j", name: "J" },
                    { initial: "k", name: "K" },
                    { initial: "l", name: "L" },
                    { initial: "m", name: "M" },
                    { initial: "n", name: "N" },
                    { initial: "o", name: "O" },
                    { initial: "p", name: "P" },
                    { initial: "q", name: "Q" },
                    { initial: "r", name: "R" },
                    { initial: "s", name: "S" },
                    { initial: "t", name: "T" },
                    { initial: "u", name: "U" },
                    { initial: "v", name: "V" },
                    { initial: "w", name: "W" },
                    { initial: "x", name: "X" },
                    { initial: "y", name: "Y" },
                    { initial: "z", name: "Z" },
                    { initial: 0, name: "#" },
                ],
            },
            area:-1,
            type:-1,
            initial:-1,
            currentPage:1,
            pageSize:48,
            // 歌手列表
            singerlist:[],
            singerCount:960
        };
    },
     created() {
        // 获取歌手的信息
        this.getSingerBy();
    },
    methods: {
        async getSingerBy(){
            let offset = (this.currentPage - 1) * this.pageSize;
            let resSinger = await this.$API.singer.getSinger(this.area,this.type,this.initial,offset);
            console.log(resSinger)
            if(resSinger.code == 200){
                this.singerlist = resSinger.artists;
            }
        },
        areaClick(areaTag){
            this.area = areaTag.area;
            this.getSingerBy()
        },
        typeClick(typeTag){
            this.type = typeTag.type
            this.getSingerBy()
        },
        initialClick(initialTag){
            console.log(initialTag)
            this.initial = initialTag.initial
            this.getSingerBy();
        },
        handleCurrentChange(page){
            this.currentPage = page;
            this.getSingerBy();
        }
    },
   
    components: { TagsBar, Songerlist }
}
</script>
<style lang="less" scoped>
    .singerlist{
        margin-top: 20px;
    }
    .pagination{
        width: 100%;
        text-align: center;
    }
</style>